<template>
	<z-nav-bar :title="courseData.name"></z-nav-bar>
	<view v-for="(question, index) in courseData.questionList" :key="question.id" class="content">
		<view class="z-font-32 text-w u-line-1">问题{{ index + 1 }}</view>
		<view class="uni-585C66 uni-mt-20">{{ question.name }}</view>
		<view class="uni-color-grey z-font-24 uni-mt-8">
			关联解决方案{{ question.schemeList ? question.schemeList.length : 0 }}个
		</view>
		<view class="z-font-32 text-w uni-mt-40">问题描述</view>
		<view class="uni-585C66 uni-mt-10">{{ question.description }}</view>
		<z-preview-media :srcStr="question.material"></z-preview-media>
		<view class="z-font-32 text-w uni-mt-40">问题效果描述</view>
		<view class="uni-mt-24">
			<view v-if="question.descriptionTagName" class="flex_fsc uni-mb-12">
				<view class="tag-item flex_sh">描述标签</view>
				<view>
					<view
						:class="{ 'uni-mt-16': index }"
						v-for="(item, index) in question.descriptionTagName.split(',')"
						:key="index"
					>
						{{ item }}
					</view>
				</view>
			</view>
			<view v-if="question.bodyPositionName" class="flex_fsc uni-mb-12">
				<view class="tag-item">身体位置</view>
				<view>
					<view
						:class="{ 'uni-mt-16': index }"
						v-for="(item, index) in question.bodyPositionName.split(',')"
						:key="index"
					>
						{{ item }}
					</view>
				</view>
			</view>
		</view>
		<view class="scheme-box">
			<view class="z-font-32 text-w">解决方案</view>
			<view v-for="(scheme, index) in question.schemeList" :key="scheme.id">
				<view class="name u-line-1">{{ `${index + 1}.${scheme.name}` }}</view>
				<view class="flex_fsc uni-mt-32">
					<view class="left-line"></view>
					<view class="z-font-32">指导教学</view>
				</view>
				<view class="uni-585C66 uni-mt-8">{{ scheme.description }}</view>
				<z-preview-media :srcStr="scheme.material"></z-preview-media>
				<view class="flex_fsc uni-mt-32">
					<view class="left-line"></view>
					<view class="z-font-32">训练要点</view>
				</view>
			</view>
		</view>
	</view>
	<bottom-box :buts="buts" @change="butsFun"></bottom-box>
</template>

<script setup>
import { getCourseDetails, delCourse } from '@/api/course.js';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance();
const eventChannel = that.getOpenerEventChannel();

const courseData = ref(uni.getStorageSync('edit-course') || {});
onShow(() => {
	getCourseDetails(courseData.value.id).then((res) => {
		courseData.value = res;
		uni.setStorageSync('edit-course', res);
		console.log(courseData.value);
	});
});

// 底部按钮
const buts = [
	{
		label: '删除课程',
		bgColor: 'uni-red-bg',
		width: 300
	},
	{
		label: '编辑课程',
		bgColor: 'uni-color-main-bg',
		width: 300
	}
];

function butsFun(e) {
	if (e) {
		uni.navigateTo({
			url: '/pages/course/edit/edit'
		});
	} else {
		uni.showModal({
			content: '确定要删除当前课程吗？',
			title: '提示',
			success: (res) => {
				if (res.confirm) {
					delCourse(courseData.value.id).then((res) => {
						that.tools.alert('课程已删除');
						eventChannel.emit('editDone');
						uni.navigateBack();
					});
				}
			}
		})
	}
}
</script>

<style lang="scss">
page {
	background: linear-gradient(to bottom, #eae9f9, #eae9f9 600rpx, #ffffff 600rpx, #ffffff);
}

@import 'course-details.scss';
</style>
